<template>
	<div class="forgetPassword">
		<router-link to='login'>
		    <img class="goback" src="../../../assets/images/movieClips/4/f-1.png" alt="" />
		</router-link>
		<!--<img class="goback" src="../../../assets/images/movieClips/4/f-1.png" alt="" />-->
	    <img class='loginLogo' src="../../../assets/images/movieClips/4/login_logo.png" alt="" />
	    <p class="title">忘记密码</p>
	    <div class="username">
	     	<div class="logoBox">
	     		<img src="../../../assets/images/movieClips/4/login_phone_icon.png" alt="" />
	     	</div>
	     	<input v-model="username" class="usernameText" placeholder="请输入手机号" style='outline:none'/>
	     	<div class="line">
	     	</div>
	     </div>
	     <div class="password codeBox">
	     	<div class="logoBox">
	     	    <img src="../../../assets/images/movieClips/7/certify_input_code_icon.png" alt="" />
	        </div>
	     	<input v-model="password" class="passwordText" placeholder="请输入验证码" style='outline:none'/>
	        <div class="getCode" @click="getCode">获取验证码</div>
	        <div class="line">
	     	</div>
	     </div>
	     <div class="password first">
	     	<div class="logoBox">
	     	    <img src="../../../assets/images/movieClips/4/login_pwd_icon.png" alt="" />
	        </div>
	     	<input v-model="firstpassword" class="passwordText" placeholder="请设置新密码" style='outline:none'/>
	        <div class="line">
	     		<img src="../../../assets/images/movieClips/4/login_long_line.png" alt="" />
	     	</div>
	     </div>
	     <div class="password newPassword">
	     	<div class="logoBox">
	     	    <img src="../../../assets/images/movieClips/4/login_pwd_icon.png" alt="" />
	        </div>
	     	<input v-model="secondpassword" class="passwordText newPasswordText" placeholder="请再次输入新密码" style='outline:none'/>
	        <div class="line">
	     	</div>
	     </div>
	     <div class="loginBtn submit" @click="submit">提交</div>
	     <div class="dialog">
	     	<el-dialog
				title="提示"
				:visible.sync="dialogVisible"
				width="30%"
			>
				<span>{{dialogInfo}}</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>
	     </div>
	</div>
</template>

<script>
export default{
	name:"forgetPassword",
	data(){
		return{
			username:'',
			password:'',
			firstpassword:'',
			secondpassword:'',
			dialogInfo:'',
            dialogVisible:false,
		}
	},
	created(){
		
	},
	methods:{
		getRandom(min,max){
		    return Math.floor(Math.random()*(max-min))+min;
		},
		yanzhengma(length){
		    var str='abcdefghijklmnopqrstuvwxyzABCDE' +
		        'FGHIJKLMNOPQRSTUVWXYZ0123456789';
		    var newstr='';
		    for(var i=0;i<length;i++) {
		        var num = this.getRandom(0,61);
		        newstr += str[num];
		    }
		    return newstr;
		},
		getCode(event){
			this.password=this.yanzhengma(6);
		},
		submit(event){
			this.dialogVisible=true;
			var newpasswordInfo={
				username:this.username,
				password:this.password,
				firstpassword:this.firstpassword,
				secondpassword:this.secondpassword
			};
			if(this.username!=''&&this.firstpassword!=''&&this.secondpassword!=''){
				if(this.firstpassword==this.secondpassword){
					this.$axios.post('http://localhost:3000/resetpassword',{
					password:this.firstpassword,
					username:this.username
					})
					.then(res=>{
//						console.log(res.data)
						if(res.data.msg=="success"){
							this.dialogInfo='密码重置成功';
//							console.log(this.dialogInfo)
						}else{
							this.dialogInfo='密码重置失败';
						}
					})
					.catch(error=>{
						console.log(error)
					})
				}else{
					this.dialogInfo='两次输入的密码不一致，请重新输入'
				}
			}else{
				this.dialogInfo='用户名、密码或新旧密码不能为空'
			}
		}
	}
}
</script>

<style scoped lang="less">
@current:100rem;
.login,.forgetPassword{
	width: 100%;
	height: 1135/@current;
	position: relative;
	background-image: url('../../../assets/images/movieClips/4/login_bg.png');
	.goback{
		position: absolute;
		left: 40/@current;
		top: 70/@current;
		width: 25/@current;
		height: 40/@current;
	}
	.loginLogo{
		margin-left: 200/@current;
		margin-top: 140/@current;
		width: 240/@current;
		height: 120/@current;
	}
	.title{
		margin: 10/@current 257/@current 0 ;
		display: block;
		width: 155/@current;
		height: 50/@current;
		font-size: 30/@current;
		color: #c0adcd;
		font-weight: 700;
		border-bottom: 4/@current solid #A54BE8;
		text-align: center;
	}
	.usernameText,.passwordText{
		font-size: 30/@current;
		color: #ebd5fb!important;
		text-align: center;
		display: block;
		position: relative;
		top:-130/@current;
		left: -50/@current;
		background-color: transparent;
		border: none;
	}
	.line{
		margin-top: 160/@current;
	}
	.username,.password{
		box-sizing: border-box;
		padding: 0 100/@current;
		overflow: hidden;
		.logoBox{
			margin-top: -20/@current;
			float:left;
			img{
				margin-top: -60/@current;
				width: 30/@current;
				height: 40/@current;
			}
		}
		.line{  
			width: 100%;
			height: 3/@current;
			background: url('../../../assets/images/movieClips/4/login_long_line.png')no-repeat;
		}
	}
	.username{
		.usernameText{
			float: left;
			margin-top: 65/@current;
			margin-left: 100/@current;
		}
		.line{
			margin-top: 100/@current;
		}
	}
	.password{
		margin-top: -80/@current;
		height:150/@current ;
		.passwordText{
			float: left;
			margin-top: 65/@current;
			margin-left: 100/@current;
		}
		.getCode{
			color: white;
			text-align: left;
			font-size: 24/@current;
			position: relative;
			right: -260/@current;
			top: 10/@current;
			width:180/@current ;
			height: 70/@current;
			line-height: 70/@current;
			background-size: 180/@current 70/@current;
		    background-image: url('../../../assets/images/movieClips/7/certify_get_code_normal.png');
		}
		.line{
			margin-top: 130/@current;
		}
		.logoBox{
			margin-top: -40/@current;
		}
	}
	.codeBox{
		.passwordText{
			float: left;
			text-align: left;
			margin-top: 65/@current;
			margin-left: 100/@current;
		}
		.line{
			width: 55%;
			margin-top: 10/@current;
		}
	}
	.newPassword{
		margin-top: -50/@current;
		.passwordText{
			margin-top: 70/@current;
		}
		.logoBox{
			margin-top: 10/@current;
		}
		.line{
			margin-top: 130/@current;
		}
	}
	.first{
		.passwordText{
			margin-top: 70/@current;
		}
		.logoBox{
			margin-top: 0/@current;
		}
		.line{
			margin-top: 120/@current;
		}
	}
	.submit{
		margin-top: 60/@current;
	}
	.loginBtn{
		background: url('../../../assets/images/movieClips/4/login_btn_normal.png');
		width: 440/@current;
		height: 75/@current;
		margin-left: 100/@current;
		font-size: 30/@current;
		color: #ebd5fb;
		text-align: center;
		line-height:75/@current ;
	}
}
</style>